<template>
  <div class="settings-container">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="settings-card">
          <template #header>
            <div class="card-header">
              <span>个人信息设置</span>
              <el-button type="primary" @click="saveProfile">保存修改</el-button>
            </div>
          </template>
          <div class="profile-settings">
            <div class="avatar-upload">
              <el-avatar :size="100" :src="profile.avatar" />
              <el-button type="primary" link class="change-avatar">
                更换头像
              </el-button>
            </div>
            <el-form :model="profile" label-width="80px">
              <el-form-item label="昵称">
                <el-input v-model="profile.nickname" placeholder="布布的昵称" />
              </el-form-item>
              <el-form-item label="生日">
                <el-date-picker
                  v-model="profile.birthday"
                  type="date"
                  placeholder="选择布布的生日"
                  style="width: 100%"
                />
              </el-form-item>
              <el-form-item label="性别">
                <el-radio-group v-model="profile.gender">
                  <el-radio label="boy">男孩子</el-radio>
                  <el-radio label="girl">女孩子</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="settings-card">
          <template #header>
            <div class="card-header">
              <span>主题设置</span>
            </div>
          </template>
          <div class="theme-settings">
            <h4>主题色彩</h4>
            <div class="color-picker">
              <div 
                v-for="color in themeColors" 
                :key="color.value"
                class="color-item"
                :class="{ active: currentTheme === color.value }"
                :style="{ backgroundColor: color.color }"
                @click="changeTheme(color.value)"
              ></div>
            </div>
            <el-divider />
            <h4>界面风格</h4>
            <div class="layout-style">
              <el-radio-group v-model="layoutStyle">
                <el-radio-button label="default">默认</el-radio-button>
                <el-radio-button label="compact">紧凑</el-radio-button>
                <el-radio-button label="comfortable">舒适</el-radio-button>
              </el-radio-group>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="settings-card">
          <template #header>
            <div class="card-header">
              <span>通知设置</span>
            </div>
          </template>
          <div class="notification-settings">
            <el-form :model="notifications" label-position="top">
              <el-form-item label="每日提醒">
                <el-switch
                  v-model="notifications.dailyReminder"
                  active-text="开启"
                  inactive-text="关闭"
                />
              </el-form-item>
              <el-form-item label="提醒时间" v-if="notifications.dailyReminder">
                <el-time-picker
                  v-model="notifications.reminderTime"
                  format="HH:mm"
                  placeholder="选择提醒时间"
                  style="width: 100%"
                />
              </el-form-item>
              <el-form-item label="消息通知">
                <el-checkbox-group v-model="notifications.types">
                  <el-checkbox label="meals">餐点提醒</el-checkbox>
                  <el-checkbox label="activities">活动提醒</el-checkbox>
                  <el-checkbox label="schedule">日程提醒</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const profile = ref({
  avatar: 'https://c-ssl.duitang.com/uploads/blog/202109/21/20210921225847_5a069.gif',
  nickname: '布布',
  birthday: new Date('2022-01-01'),
  gender: 'boy'
})

const themeColors = [
  { value: 'blue', color: '#409EFF' },
  { value: 'pink', color: '#F56C6C' },
  { value: 'green', color: '#67C23A' },
  { value: 'purple', color: '#6F7AD3' }
]

const currentTheme = ref('blue')
const layoutStyle = ref('default')

const notifications = ref({
  dailyReminder: true,
  reminderTime: new Date(2000, 0, 1, 9, 0),
  types: ['meals', 'activities']
})

const saveProfile = () => {
  // 保存个人信息的逻辑
}

const changeTheme = (theme) => {
  currentTheme.value = theme
  // 更改主题的逻辑
}
</script>

<style scoped>
.settings-container {
  padding: 20px;
}

.settings-card {
  margin-bottom: 20px;
  height: calc(100% - 20px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.profile-settings {
  padding: 20px 0;
}

.avatar-upload {
  text-align: center;
  margin-bottom: 20px;
}

.change-avatar {
  margin-top: 10px;
}

.theme-settings {
  padding: 20px 0;
}

.theme-settings h4 {
  margin: 0 0 15px 0;
  color: #2c3e50;
}

.color-picker {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.color-item {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  border: 2px solid transparent;
}

.color-item:hover {
  transform: scale(1.1);
}

.color-item.active {
  border-color: #dcdfe6;
  transform: scale(1.1);
}

.layout-style {
  margin: 20px 0;
}

.notification-settings {
  padding: 20px 0;
}

:deep(.el-checkbox-group) {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
</style> 